<template>
  <div class="witness-page">
    <breadcrumb
      :bread-path-list="breadPathList"
      last-bread-title="预警详情"
      :show-back-btn-flag="true"
    >
    </breadcrumb>
    <div class="witness-body">
      <div class="layout-header content-header">
        <p >当前项目:{{form.projectName}}-{{ form.bidName }}</p>
      </div>
      <div class="layout-body">
        <div class="ui-title">
        基本信息
        </div>
        <el-descriptions  size="mini"  labelClassName="desLabel"  :column="3" border>
          <el-descriptions-item label="人员姓名">{{ form.personName }}</el-descriptions-item>
          <el-descriptions-item label="人员类型">{{typeRYLB[form.personType]  }}</el-descriptions-item>
          <el-descriptions-item label="预警名称">{{ form.alarmName }}</el-descriptions-item>
          <el-descriptions-item label="事件描述">{{ form.alarmContent }}</el-descriptions-item>
        </el-descriptions>
        <div class="ui-title">
        预警信息
         <div class="layout_content">
          <el-tabs v-model="activeName" @tab-click="()=>{}">
            <el-tab-pane label="视频图像" name="视频图像">
              <EasyPlayer  :url="url"></EasyPlayer>
            </el-tab-pane>
            <el-tab-pane label="轨迹图像" name="轨迹图像">
                 <proViewComponent  ref="treeJScans"  :onGetWanger="onGetWanger"  />
            </el-tab-pane>
          </el-tabs>
         </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import proViewComponent from "@/views/witness/components/Object3D/proViewComponent.vue";
import EasyPlayer from './easyPlayer.vue'
import { trackGetAlarm,trackGetAlarmPlaybackURLs } from "@/api/pageStats"
// import ListCard from "./components/listCard.vue";
// import DialogDetail from "./components/dialog_detail.vue";
export default {
  components: {
    proViewComponent,
    EasyPlayer
  },
  data() {
    return {
      typeRYLB:{
          'ZJ': "评标专家",
          'JD': "甲方代表",
          'ZBDL': "招标代理",
        },
      dialogDetail: false,
      activeName:'轨迹图像',
      breadPathList:[
        {
          title:'统计查询',
          path:'/wintessquery/viewXm'
        },
      ],
      value: "",
      options: [
        {
          label: "项目1",
          value: "1"
        },
        {
          label: "项目2",
          value: "2"
        }
      ],
      list_step:[
        {
          title:'进入评标区',
          type:1,
          time:'2024-09-01 10:00:00'
        },
        {
          title:'',
          type:2,
          time:'2024-09-01 10:00:00',
          content:'识别到：王大辉迟到',
          show:false
        },
        {
          title:'开始评标',
          type:1,
          time:'2024-09-01 12:00:00'
        },
        {
          title:'',
          type:2,
          time:'2024-09-01 12:00:00',
          content:'识别到：王大辉交头接耳',
          show:true
        },
        {
          title:'结束评标',
          type:1,
          time:'2024-09-01 15:00:00',
          content:''
        },
        {
          title:'离开评标区',
          type:1,
          time:'2024-09-01 15:00:00',
          content:''
        }
      ],
      list_people:[
        {
          label:'评标专家',
          color:' #68F60C',
          children:[
            {
              name:'张三',
              src: require('@/assets/imgs/dp/专家2.png'),
              checked:false
            },
            {
              name:'李四',
              src: require('@/assets/imgs/dp/专家2.png'),
              checked:false
            }
          ]

        },
        {
          label:'专家代理',
          color:'#FFC30A',
          children:[
            {
              name:'张三1',
              src: require('@/assets/imgs/dp/专家3.png'),
              checked:false
            },
            {
              name:'李四2',
              src: require('@/assets/imgs/dp/专家3.png'),
              checked:false
            }
          ]
        },
        {
          label:'专家代理',
          color:'#EB31D9',
          children:[
            {
              name:'张三1',
              src: require('@/assets/imgs/dp/专家3.png'),
              checked:false
            },
            {
              name:'李四2',
              src: require('@/assets/imgs/dp/专家3.png'),
              checked:false
            }
          ]
        }
      ],
      cardlist: [
        {
          name: "张三",
          id:1,
          value: "预警1",
          points:{ x: 400, y: 188, z: 3 }
        },
        {
          name: "李四",
          value: "预警2",
          id:'2',
          points: { x: 300, y: 188, z: 3 },
        }
      ],
      url:'',
      imgActive: [require("@/assets/imgs/dp/active.png"), require("@/assets/imgs/dp/noactive.png")],
      form:{}
    };
  },
 async created(){
    await this.handleTrackGetAlarm()
    this.handleTrackGetAlarmPlaybackURLs()
    this.getAxiosDataYJpoint()


  },
  mounted() {
    // this.getAxiosDataYJpoint();
    // this.getAxiosDataRYpoint();
  },
  methods: {
    // 获取预警详情
    async handleTrackGetAlarm(){
      const id = this.$route.query.id
      const result = await trackGetAlarm(id)
      this.form = {}
      if(result.code === 0) {
        this.form = result.data
      }
    },
      //   获取设置预警点位
    getAxiosDataYJpoint() {
     const { personName,id,xyz} = this.form
     const point =  { personName ,id ,xyz}
      this.$refs["treeJScans"].setWangerRadiusPoints('add',point);
    },
    // 获取回放地址
    async handleTrackGetAlarmPlaybackURLs(){
    const deviceId = this.form.deviceId.split(',')[0] || ''

    const  p = {
        "deviceId":deviceId,
        "alarmId": this.form.id
      }
     const r = trackGetAlarmPlaybackURLs(p)
     if(r.code === 0 && r.data.url ){
        this.url = r.data.url

     }
    },
    handleClickIcon(val){
      console.log(val);

    },
    onGetWanger(msg){
       this.dialogDetail  = true

    },
    // handleGotoRight(){
    //   this.$refs['listCard'].scrollBy(250)
    // },
    // 设置人员
    // getAxiosDataRYpoint() {
    // // 评标专家
    // // 招标代理
    // // 甲方代表
    //   const peopleList = [
    //     {
    //       type:'PBZJ',
    //       color:'#68F60C',
    //       points:[
    //         { x: 360, y: 220, z: 3 },
    //         { x: 370, y: 220, z: 3 }
    //       ]

    //     },
    //     {
    //       type:'ZBDL',
    //       color:'#FFC30A',
    //       points:[
    //         { x: 340, y: 220, z: 3 },
    //         { x: 350, y: 220, z: 3 }
    //       ]
    //     },
    //     {
    //       type:'JFDB',
    //       color:'#EB31D9',
    //       points:[
    //         { x: 380, y: 220, z: 3 },
    //         { x: 390, y: 220, z: 3 }
    //       ]
    //     }
    //   ]
    //   // this.$refs["treeJScans"].setPeopleRadiusPoints(peopleList);
    // },

    handleDetailClick() {
      this.dialogDetail = true;
    },
    handleChange() {},
    handleRouteFn(){
      this.$router.push({path:'/wintessquery/nowTrajectory'})
    }
  }
};
</script>
<style scoped lang="scss">
$backBG: #2b333f;
$backCard: #193860;
.witness-page {


}
.witness-body {
  height: calc(100vh - 110px);
  background-color: #E5E5E5;
}
.layout-header.content-header {
  background-color: #fff;
  border: 1px solid #D2D2D2;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  border-left: none;
  border-right: none;
}
.layout-body{
  display: flex;
  margin:10px;
  padding: 10px;
  flex-direction: column;
  background: #fff;
  display: flex;
  overflow: hidden;
  .layout_content{
    height: calc(100vh - 320px);
    border: 1px solid #C8C8C8 ;
    box-sizing: border-box;
    ::v-deep .el-tab-pane{
        padding: 0;
    }
  }
  ::v-deep .desLabel{
    width: 70px;
  }
}
.el-icon-sort {
  transform: rotateZ(90deg);
}
.box_description{
  position: absolute;
  top: -50px;
  background: #1890FF;
  border: 1px solid rgba(24,144,255,0.36);
  color: #fff;
  width: 100%;
  text-align: left;
  padding: 8px;
  height: 30px;
  border-radius: 4px;
  .close{
    position: absolute;
    top: 0;
    right: 4px;
  }
}
::v-deep .el-steps{
            height: 120px;
            padding-top:60px;


}
</style>

